<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑位置信息 - 河域分割系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">河域分割系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('dashboard') }}">仪表板</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('data.my_data') }}">我的数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('data.upload') }}">上传数据</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('analysis.time_series_analysis') }}">时间分析</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> {{ current_user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人资料</a></li>
                            <li><a class="dropdown-item" href="#">设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container my-4">
        <div class="row mb-4">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url_for('data.my_data') }}">我的数据</a></li>
                        <li class="breadcrumb-item"><a href="{{ url_for('data.image_detail', image_id=image.id) }}">{{ image.filename.split('_', 1)[1] }}</a></li>
                        <li class="breadcrumb-item active">编辑位置信息</li>
                    </ol>
                </nav>
                <h2>编辑位置信息</h2>
                <p class="text-muted">为图像添加地理位置信息，以便进行更准确的分析</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ url_for('data.image_detail', image_id=image.id) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> 返回图像详情
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">位置信息</h5>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            <div class="mb-3">
                                <label for="latitude" class="form-label">纬度</label>
                                <input type="text" class="form-control" id="latitude" name="latitude" value="{{ image.latitude }}" placeholder="例如: 39.9042">
                                <div class="form-text">纬度范围: -90 到 90</div>
                            </div>
                            <div class="mb-3">
                                <label for="longitude" class="form-label">经度</label>
                                <input type="text" class="form-control" id="longitude" name="longitude" value="{{ image.longitude }}" placeholder="例如: 116.4074">
                                <div class="form-text">经度范围: -180 到 180</div>
                            </div>
                            <div class="mb-3">
                                <label for="city" class="form-label">城市/地区名称</label>
                                <input type="text" class="form-control" id="city" name="city" value="{{ image.city }}" placeholder="例如: 北京市">
                                <div class="form-text">如果不填写，系统将尝试根据坐标自动获取</div>
                            </div>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save"></i> 保存位置信息
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">地图选择</h5>
                    </div>
                    <div class="card-body">
                        <div id="map" style="height: 300px;"></div>
                        <div class="mt-3">
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle"></i> 在地图上点击选择位置，或通过搜索查找位置
                            </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="search-box" placeholder="搜索位置...">
                                <button class="btn btn-outline-primary" type="button" id="search-button">
                                    <i class="bi bi-search"></i> 搜索
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">位置信息的用途</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>为什么需要位置信息？</h6>
                                <ul>
                                    <li>计算实际水域面积（从像素到实际面积的转换）</li>
                                    <li>生成带有地理参考的专题图</li>
                                    <li>进行基于位置的时间序列分析</li>
                                    <li>与其他地理数据集进行整合分析</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6>如何获取准确的位置信息？</h6>
                                <ul>
                                    <li>从图像的EXIF数据中提取（如果有）</li>
                                    <li>使用地图选择工具</li>
                                    <li>从卫星影像的元数据中获取</li>
                                    <li>使用GPS设备记录采集地点</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 专题图导出部分 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="bi bi-map"></i> 专题图导出</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <h6 class="fw-bold"><i class="bi bi-info-circle"></i> 专题图设计</h6>
                                    <p>根据您提供的位置信息，系统可以生成包含以下元素的专业专题图：</p>
                                    <ul>
                                        <li><i class="bi bi-compass"></i> <strong>指北针</strong> - 提供地图方向指示</li>
                                        <li><i class="bi bi-rulers"></i> <strong>比例尺</strong> - 准确反映实际距离</li>
                                        <li><i class="bi bi-palette"></i> <strong>图例</strong> - 清晰解释地图符号含义</li>
                                    </ul>
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label"><i class="bi bi-palette2"></i> 专题图主题样式</label>
                                    <select class="form-select" id="map-theme">
                                        <option value="light">亮色主题</option>
                                        <option value="dark">暗色主题</option>
                                        <option value="satellite">卫星图叠加</option>
                                        <option value="blue">水系专用蓝色</option>
                                        <option value="terrain">地形主题</option>
                                    </select>
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label"><i class="bi bi-layers"></i> 导出图层选择</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="layer-waterbody" checked>
                                        <label class="form-check-label" for="layer-waterbody">水体图层</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="layer-heatmap">
                                        <label class="form-check-label" for="layer-heatmap">水体变化热力图</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="layer-labels" checked>
                                        <label class="form-check-label" for="layer-labels">地名标注</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <h6 class="fw-bold"><i class="bi bi-tags"></i> 标注选项</h6>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="add-notes" checked>
                                        <label class="form-check-label" for="add-notes">添加水体标注</label>
                                    </div>
                                    <div class="input-group mt-2" id="note-input-group">
                                        <input type="text" class="form-control" id="note-text" placeholder="输入水体名称或描述">
                                        <button class="btn btn-outline-secondary" type="button" id="add-note-btn">添加</button>
                                    </div>
                                    <div class="mt-2 small text-muted">已添加标注：水系主干道、支流1</div>
                                </div>
                                <div class="mb-3">
                                    <h6 class="fw-bold"><i class="bi bi-sliders"></i> 高级选项</h6>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label class="form-label small">输出DPI</label>
                                                <select class="form-select form-select-sm" id="export-dpi">
                                                    <option value="96">96 (屏幕分辨率)</option>
                                                    <option value="150">150 (标准打印)</option>
                                                    <option value="300" selected>300 (高质量)</option>
                                                    <option value="600">600 (专业打印)</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label class="form-label small">格式</label>
                                                <select class="form-select form-select-sm" id="export-format">
                                                    <option value="png">PNG</option>
                                                    <option value="jpg">JPG</option>
                                                    <option value="pdf">PDF</option>
                                                    <option value="svg">SVG</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="include-metadata" checked>
                                        <label class="form-check-label" for="include-metadata">包含元数据和坐标信息</label>
                                    </div>
                                </div>
                                <div class="d-grid gap-2">
                                    <button class="btn btn-success" type="button" id="preview-map-btn">
                                        <i class="bi bi-eye"></i> 预览专题图
                                    </button>
                                    <button class="btn btn-primary" type="button" id="export-map-btn">
                                        <i class="bi bi-download"></i> 导出专题图
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <i class="bi bi-lightbulb"></i> <strong>提示：</strong> 
                                    专题图可用于学术论文、工程报告、环境监测和规划决策。保存位置信息后可随时在图像详情页面生成专题图。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>河域分割系统</h5>
                    <p>基于深度学习的河域分割与分析平台</p>
                </div>
                <div class="col-md-3">
                    <h5>链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('index') }}" class="text-white">首页</a></li>
                        <li><a href="{{ url_for('dashboard') }}" class="text-white">仪表板</a></li>
                        <li><a href="{{ url_for('data.my_data') }}" class="text-white">我的数据</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>账户</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white">个人资料</a></li>
                        <li><a href="#" class="text-white">设置</a></li>
                        <li><a href="{{ url_for('auth.logout') }}" class="text-white">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <p>&copy; 2023 河域分割系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        // 初始化地图
        var map = L.map('map').setView([39.9042, 116.4074], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        var marker;
        
        // 如果已有坐标，设置地图中心和标记
        {% if image.latitude and image.longitude %}
            map.setView([{{ image.latitude }}, {{ image.longitude }}], 13);
            marker = L.marker([{{ image.latitude }}, {{ image.longitude }}]).addTo(map);
        {% endif %}
        
        // 点击地图设置坐标
        map.on('click', function(e) {
            if (marker) {
                map.removeLayer(marker);
            }
            marker = L.marker(e.latlng).addTo(map);
            
            // 更新表单字段
            document.getElementById('latitude').value = e.latlng.lat.toFixed(6);
            document.getElementById('longitude').value = e.latlng.lng.toFixed(6);
            
            // 通过API获取地点名称
            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}&zoom=10&accept-language=zh-CN`)
                .then(response => response.json())
                .then(data => {
                    if (data.address) {
                        var cityName = data.address.city || data.address.town || data.address.county;
                        if (cityName) {
                            document.getElementById('city').value = cityName;
                        }
                    }
                })
                .catch(error => console.error('Error fetching location name:', error));
        });
        
        // 搜索功能
        document.getElementById('search-button').addEventListener('click', function() {
            var searchText = document.getElementById('search-box').value;
            if (searchText) {
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchText)}&limit=1&accept-language=zh-CN`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.length > 0) {
                            var lat = parseFloat(data[0].lat);
                            var lon = parseFloat(data[0].lon);
                            
                            map.setView([lat, lon], 13);
                            
                            if (marker) {
                                map.removeLayer(marker);
                            }
                            marker = L.marker([lat, lon]).addTo(map);
                            
                            document.getElementById('latitude').value = lat.toFixed(6);
                            document.getElementById('longitude').value = lon.toFixed(6);
                            
                            // 设置城市名称（如果有）
                            if (data[0].display_name) {
                                var parts = data[0].display_name.split(', ');
                                if (parts.length >= 2) {
                                    document.getElementById('city').value = parts[0];
                                }
                            }
                        } else {
                            alert('未找到匹配的位置');
                        }
                    })
                    .catch(error => console.error('Search error:', error));
            }
        });
        
        // 按回车键搜索
        document.getElementById('search-box').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('search-button').click();
            }
        });

        // 专题图导出功能
        document.getElementById('preview-map-btn').addEventListener('click', function() {
            if (!marker) {
                alert('请先在地图上选择位置');
                return;
            }
            alert('专题图预览功能正在开发中，即将上线！');
        });
        
        document.getElementById('export-map-btn').addEventListener('click', function() {
            if (!marker) {
                alert('请先在地图上选择位置');
                return;
            }
            
            // 获取用户选择的配置
            var theme = document.getElementById('map-theme').value;
            var dpi = document.getElementById('export-dpi').value;
            var format = document.getElementById('export-format').value;
            var includeWaterBody = document.getElementById('layer-waterbody').checked;
            var includeHeatmap = document.getElementById('layer-heatmap').checked;
            var includeLabels = document.getElementById('layer-labels').checked;
            var includeMetadata = document.getElementById('include-metadata').checked;
            
            // 显示导出进度提示
            alert(`正在准备导出专题图\n\n主题：${theme}\n分辨率：${dpi} DPI\n格式：${format.toUpperCase()}\n\n导出功能即将上线！`);
        });
        
        // 控制水体标注输入框的显示与隐藏
        document.getElementById('add-notes').addEventListener('change', function() {
            document.getElementById('note-input-group').style.display = this.checked ? 'flex' : 'none';
        });
        
        // 添加水体标注按钮
        document.getElementById('add-note-btn').addEventListener('click', function() {
            var noteText = document.getElementById('note-text').value;
            if (noteText) {
                alert(`已添加水体标注: "${noteText}"`);
                document.getElementById('note-text').value = '';
            }
        });
    </script>
</body>
</html> 